<template>
  <AppLayout>
    <div class="game-detail" v-if="game">
      <div class="game-header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/games' }">游戏列表</el-breadcrumb-item>
          <el-breadcrumb-item>{{ game.title }}</el-breadcrumb-item>
        </el-breadcrumb>
        
        <div class="game-banner" :style="{ backgroundImage: `url(${game.banner})` }">
          <div class="game-info-overlay">
            <h1>{{ game.title }}</h1>
            <div class="game-meta">
              <el-tag size="large">{{ game.category }}</el-tag>
              <div class="rating">
                <el-rate v-model="game.rating" disabled text-color="#ff9900"></el-rate>
                <span>{{ game.rating }} 分</span>
              </div>
              <div class="release-date">发布日期: {{ game.releaseDate }}</div>
            </div>
            <el-button type="primary" size="large" @click="startGame">开始游戏</el-button>
          </div>
        </div>
      </div>

      <div class="game-content mt-20">
        <el-tabs>
          <el-tab-pane label="游戏介绍">
            <div class="game-description">
              <h2>游戏介绍</h2>
              <p>{{ game.description }}</p>
              
              <h3 class="mt-20">游戏特色</h3>
              <ul>
                <li v-for="(feature, index) in game.features" :key="index">
                  {{ feature }}
                </li>
              </ul>
              
              <h3 class="mt-20">游戏玩法</h3>
              <p>{{ game.gameplay }}</p>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="游戏截图">
            <div class="game-screenshots">
              <el-row :gutter="20">
                <el-col :span="8" v-for="(screenshot, index) in game.screenshots" :key="index">
                  <el-image 
                    :src="screenshot" 
                    :preview-src-list="game.screenshots"
                    fit="cover"
                    class="screenshot-image"
                  ></el-image>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="用户评价">
            <div class="game-reviews">
              <div class="review-summary">
                <div class="rating-summary">
                  <h2>{{ game.rating }}</h2>
                  <el-rate v-model="game.rating" disabled text-color="#ff9900"></el-rate>
                  <p>{{ game.reviewCount }} 条评价</p>
                </div>
                <div class="rating-distribution">
                  <div class="rating-bar" v-for="i in 5" :key="i">
                    <span>{{ 6 - i }} 星</span>
                    <el-progress 
                      :percentage="getRatingPercentage(6 - i)" 
                      :stroke-width="12"
                      :color="i <= 2 ? '#67C23A' : i === 3 ? '#E6A23C' : '#F56C6C'"
                    ></el-progress>
                    <span>{{ getRatingCount(6 - i) }}</span>
                  </div>
                </div>
              </div>
              
              <div class="review-list mt-20">
                <h3>用户评价</h3>
                <div class="review-item" v-for="review in game.reviews" :key="review.id">
                  <div class="review-header flex-between">
                    <div class="user-info">
                      <el-avatar :size="40" :src="review.avatar"></el-avatar>
                      <div class="user-name">{{ review.username }}</div>
                    </div>
                    <div class="review-rating">
                      <el-rate v-model="review.rating" disabled text-color="#ff9900"></el-rate>
                      <span class="review-date">{{ review.date }}</span>
                    </div>
                  </div>
                  <div class="review-content">
                    {{ review.content }}
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          
          <el-tab-pane label="系统要求">
            <div class="system-requirements">
              <h3>最低配置</h3>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="操作系统">{{ game.requirements.minimum.os }}</el-descriptions-item>
                <el-descriptions-item label="处理器">{{ game.requirements.minimum.cpu }}</el-descriptions-item>
                <el-descriptions-item label="内存">{{ game.requirements.minimum.ram }}</el-descriptions-item>
                <el-descriptions-item label="显卡">{{ game.requirements.minimum.gpu }}</el-descriptions-item>
                <el-descriptions-item label="存储空间">{{ game.requirements.minimum.storage }}</el-descriptions-item>
                <el-descriptions-item label="其他设备">{{ game.requirements.minimum.devices }}</el-descriptions-item>
              </el-descriptions>
              
              <h3 class="mt-20">推荐配置</h3>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="操作系统">{{ game.requirements.recommended.os }}</el-descriptions-item>
                <el-descriptions-item label="处理器">{{ game.requirements.recommended.cpu }}</el-descriptions-item>
                <el-descriptions-item label="内存">{{ game.requirements.recommended.ram }}</el-descriptions-item>
                <el-descriptions-item label="显卡">{{ game.requirements.recommended.gpu }}</el-descriptions-item>
                <el-descriptions-item label="存储空间">{{ game.requirements.recommended.storage }}</el-descriptions-item>
                <el-descriptions-item label="其他设备">{{ game.requirements.recommended.devices }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      
      <div class="related-games mt-20">
        <h2>相关游戏</h2>
        <el-row :gutter="20">
          <el-col :span="6" v-for="relatedGame in relatedGames" :key="relatedGame.id">
            <el-card shadow="hover" class="game-card" @click="goToGame(relatedGame.id)">
              <img :src="relatedGame.cover" class="game-cover" />
              <div class="game-info">
                <h3>{{ relatedGame.title }}</h3>
                <p>{{ relatedGame.description }}</p>
                <div class="game-meta flex-between">
                  <el-tag size="small">{{ relatedGame.category }}</el-tag>
                  <el-rate v-model="relatedGame.rating" disabled text-color="#ff9900"></el-rate>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-else class="loading-container flex-center">
      <el-empty description="游戏信息加载中..."></el-empty>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AppLayout from '../components/layout/Layout.vue'

defineOptions({
  name: 'GameDetailPage'
})

const route = useRoute()
const router = useRouter()
const gameId = route.params.id

// 模拟游戏数据
const game = ref({
  id: gameId,
  title: '舞动奇迹',
  description: '《舞动奇迹》是一款革命性的体感舞蹈游戏，它利用先进的动作捕捉技术，精确地记录玩家的每一个动作。游戏中包含多种舞蹈风格，从流行舞到街舞，从拉丁舞到现代舞，应有尽有。玩家可以跟随专业舞者的指导，学习各种舞蹈动作，提升自己的舞蹈技能。',
  banner: 'https://via.placeholder.com/1200x400',
  cover: 'https://via.placeholder.com/300x200',
  category: '舞蹈',
  rating: 4.5,
  releaseDate: '2023-10-15',
  reviewCount: 128,
  features: [
    '先进的动作捕捉技术，精确记录玩家动作',
    '多种舞蹈风格可供选择',
    '专业舞者指导的舞蹈教程',
    '单人和多人游戏模式',
    '全球排行榜系统',
    '自定义舞蹈创作模式'
  ],
  gameplay: '玩家需要站在摄像头前，跟随屏幕上的舞者做出相同的动作。系统会实时评估玩家的动作准确度，并给出相应的分数。游戏难度从简单到专业共分为5个等级，玩家可以根据自己的舞蹈水平选择合适的难度。此外，游戏还提供了多人对战模式，玩家可以与朋友一起比拼舞技。',
  screenshots: [
    'https://via.placeholder.com/800x450',
    'https://via.placeholder.com/800x450',
    'https://via.placeholder.com/800x450',
    'https://via.placeholder.com/800x450',
    'https://via.placeholder.com/800x450',
    'https://via.placeholder.com/800x450'
  ],
  requirements: {
    minimum: {
      os: 'Windows 10 64位',
      cpu: 'Intel Core i5-4590 / AMD FX 8350',
      ram: '8 GB RAM',
      gpu: 'NVIDIA GeForce GTX 970 / AMD Radeon R9 290',
      storage: '10 GB 可用空间',
      devices: 'Kinect 2.0 或兼容的深度摄像头'
    },
    recommended: {
      os: 'Windows 10 64位',
      cpu: 'Intel Core i7-7700 / AMD Ryzen 5 1600',
      ram: '16 GB RAM',
      gpu: 'NVIDIA GeForce GTX 1070 / AMD Radeon RX Vega 56',
      storage: '10 GB 可用空间 (SSD推荐)',
      devices: 'Kinect 2.0 或兼容的深度摄像头，高清摄像头'
    }
  },
  reviews: [
    {
      id: 1,
      username: '舞蹈爱好者',
      avatar: 'https://via.placeholder.com/40',
      rating: 5,
      date: '2023-10-20',
      content: '这是我玩过的最好的舞蹈游戏！动作捕捉非常精准，舞蹈动作也很专业。我已经玩了一个月，感觉自己的舞蹈水平有了很大提升。'
    },
    {
      id: 2,
      username: '游戏玩家',
      avatar: 'https://via.placeholder.com/40',
      rating: 4,
      date: '2023-10-18',
      content: '游戏很有趣，但有时候动作捕捉会有一点延迟。总体来说还是很推荐的，特别是喜欢舞蹈的朋友。'
    },
    {
      id: 3,
      username: '健身达人',
      avatar: 'https://via.placeholder.com/40',
      rating: 5,
      date: '2023-10-15',
      content: '将这款游戏作为我日常锻炼的一部分，非常有效！既能学习舞蹈，又能锻炼身体，一举两得。'
    }
  ]
})

// 模拟相关游戏数据
const relatedGames = ref([
  {
    id: 5,
    title: '节奏大师',
    description: '感受音乐的律动，挑战你的节奏感',
    cover: 'https://via.placeholder.com/300x200',
    category: '舞蹈',
    rating: 4.3
  },
  {
    id: 9,
    title: '街舞传奇',
    description: '体验街舞文化，展现你的舞蹈才华',
    cover: 'https://via.placeholder.com/300x200',
    category: '舞蹈',
    rating: 4.4
  },
  {
    id: 10,
    title: '音乐盛宴',
    description: '与音乐互动，创造属于你的旋律',
    cover: 'https://via.placeholder.com/300x200',
    category: '音乐',
    rating: 4.2
  },
  {
    id: 11,
    title: '健身教练',
    description: '专业的健身指导，帮助你保持健康',
    cover: 'https://via.placeholder.com/300x200',
    category: '健身',
    rating: 4.1
  }
])

// 获取评分分布百分比
const getRatingPercentage = (stars) => {
  // 模拟数据，实际应用中应该从后端获取
  const distribution = {
    5: 70,
    4: 20,
    3: 5,
    2: 3,
    1: 2
  }
  return distribution[stars] || 0
}

// 获取评分数量
const getRatingCount = (stars) => {
  const distribution = {
    5: 90,
    4: 25,
    3: 6,
    2: 4,
    1: 3
  }
  return distribution[stars] || 0
}

const startGame = () => {
  // 实际应用中，这里可能会跳转到游戏启动页面或者下载游戏
  alert('游戏即将开始！')
}

const goToGame = (id) => {
  router.push(`/game/${id}`)
}

onMounted(() => {
  // 实际应用中，这里应该调用API获取游戏详情
  console.log('加载游戏ID:', gameId)
})
</script>

<style scoped>
.game-header {
  margin-bottom: 30px;
}

.game-banner {
  height: 400px;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  margin-top: 20px;
  position: relative;
}

.game-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
  border-radius: 0 0 8px 8px;
}

.game-info-overlay h1 {
  font-size: 32px;
  margin-bottom: 15px;
}

.game-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.game-content {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.game-description h2, .game-description h3 {
  margin-bottom: 15px;
}

.game-description p {
  line-height: 1.6;
  margin-bottom: 15px;
}

.game-description ul {
  padding-left: 20px;
  margin-bottom: 15px;
}

.game-description li {
  margin-bottom: 10px;
}

.screenshot-image {
  width: 100%;
  height: 200px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.review-summary {
  display: flex;
  gap: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.rating-summary {
  text-align: center;
  min-width: 150px;
}

.rating-summary h2 {
  font-size: 36px;
  color: #ff9900;
  margin-bottom: 10px;
}

.rating-distribution {
  flex: 1;
}

.rating-bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.rating-bar span {
  width: 50px;
}

.rating-bar .el-progress {
  margin: 0 10px;
  flex: 1;
}

.review-item {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.review-header {
  margin-bottom: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-date {
  margin-left: 10px;
  color: #909399;
  font-size: 14px;
}

.review-content {
  line-height: 1.6;
}

.related-games h2 {
  margin-bottom: 20px;
}

.game-card {
  cursor: pointer;
  transition: transform 0.3s;
  height: 100%;
  margin-bottom: 20px;
}

.game-card:hover {
  transform: translateY(-5px);
}

.game-cover {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.loading-container {
  height: 400px;
}
</style>